<style>
    #mask {
        background-color: rgb(0, 0, 0);
        opacity: 0.5 !important;
        filter: alpha(opacity=50);
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1000;
    }

    #login {
        position: fixed;
        width: 80%;
        height: 600px;
        z-index: 1001;
        background: white;
    }

    #car-el {
        position: fixed;
        width: 60%;
        height: 500px;
        z-index: 1001;
    }

    .customer-wrap .content-wrap .cont-item {
        font-size: 14px;
        cursor: pointer;
    }

    .customer-wrap .content-wrap .cont-item:hover {
        background: #eee;
    }

    .wrap .mo-tab .tab-nav {
        border-bottom: 1px solid #ddd;
    }

    .wrap .mo-tab li {
        text-align: center;
    }

    .wrap .mo-tab li a {
        display: block;
        color: #333;
        padding: 10px 0;
    }

    .wrap .mo-tab li.actived {
        background-color: darkcyan;
        color: white;
    }

    .wrap .mo-tab li.actived a {
        color: #fff;
    }

    .wrap .mo-tab .content-wrap {
        max-width: 100%;
        min-height: 550px;
        width: 100%;
        overflow: hidden;
        position: relative;
    }

    .wrap .mo-tab .content-wrap .content-item {
        position: absolute;
        display: none;
        height: 100%;
        width: 100%;
    }

    .wrap .mo-tab .content-wrap .map-content {
        height: 100%;
        overflow: hidden;
    }

    .wrap .mo-tab .content-wrap .current {
        display: block;
    }
    /*轨迹图按钮样式*/
    #carDatail .btns{
        position: absolute;
        z-index: 99;
    }
    #carDatail .btns button {
        background-color: rgba(245,241,200, 0.5);
    }
</style>
<div class="customer-wrap">
    <div class="container">
        <div class="header">
            <div class='weui-cells'>
                <div class='weui-cell'>
                    <div class='weui-cell__bd'>
                        <div class=" weui-dialog__title">我的车辆列表</div>
                    </div>
                    <div class=" weui-cell__hd" style="position:relative;">
                        <i id="search-btn" class="i i-search" style="position:absolute; right:10px; z-index:999; color:#333; cursor: pointer;"></i>
                        <input id="keyword" type="text" placeholder="请输入VIN号" class="weui-btn weui-btn_mini weui-btn_default" />
                    </div>
                    <div id="addCar" class=" weui-cell__ft" style="color:#333; cursor: pointer;">添加车辆</div>
                </div>
            </div>
        </div>
        <div class="content-wrap">
            <div class="weui-cells" id="car-list">
                <div class="weui-cell">
                    <div class=" weui-cell__bd"><small>vin号</small></div>
                    <div class=" weui-cell__bd"><small>姓名</small></div>
                    <div class=" weui-cell__bd"><small>角色</small></div>
                    <div class=" weui-cell__bd"><small>品牌</small></div>
                    <div class=" weui-cell__bd"><small>车牌号</small></div>
                </div>
            </div>
        </div>
    </div>
    <div id="mask" style="display:none;"></div>
    <div class="wrap" id="login" style="display:none;">
        <div class='loginCon'>
            <div id='close' style='position: absolute; right: 0; top: 0;'><i class='weui-icon weui-icon-cancel weui-icon-original' style='font-size: 25px;'></i></div>
        </div>
        <div class="mo-tab" data-config='{
            "triggerType": "click",
            "effect": "default"
        }'>
            <div class="">
                <ul class="tab-nav weui-flex">
                    <li class=" weui-flex__item actived"><a href="javascript:void(0)">基本信息</a></li>
                    <li class=" weui-flex__item"><a href="javascript:void(0)" id="startMap">轨迹回放</a></li>
                    <li class=" weui-flex__item"><a href="javascript:void(0)">数据报表</a></li>
                </ul>
            </div>
            <div id="carDatail" class="content-wrap">
                <div class="content-item current">
                    <div class=" weui-flex" style="height:100%;">
                        <div class="" style="width:300px; background-color:whitesmoke;">
                            <div class=" weui-cells">
                                <div class=" weui-cell">
                                    <div class=" weui-cell__hd">内部编号:</div>
                                    <div class=" weui-cell__bd data" id="vhcle" name="vhcle">0</div>
                                </div>
                                <div class=" weui-cell">
                                    <div class=" weui-cell__hd">底盘号:</div>
                                    <div class=" weui-cell__bd data" name="vhvin8">0</div>
                                </div>
                                <div class=" weui-cell">
                                    <div class=" weui-cell__hd">终端编号:</div>
                                    <div class=" weui-cell__bd data" name="deviceNo">0</div>
                                </div>
                                <div class="weui-cell">
                                    <div class=" weui-cell__hd">sim卡属性:</div>
                                    <div class=" weui-cell__bd data" name="simNo">0</div>
                                </div>
                                <div class=" weui-cell">
                                    <div class=" weui-cell__hd">车牌号:</div>
                                    <div class=" weui-cell__bd data" name="license">0</div>
                                </div>
                            </div>
                        </div>
                        <div class=" weui-flex__item">
                            <div class=" weui-dialog__title">当前车辆位置</div>
                            <div class="map-content" id="allmap"></div>
                        </div>
                    </div>
                </div>
                <div class="content-item">
                    <div class="data-wrap weui-cell" style="padding:0;">
                        <div class="start weui-cell__hd" style="font-size:12px;">开始:</div>
                        <input id="starttime" type="text" name="starttime" onclick="WdatePicker( {el:this,dateFmt:'yyyy-MM-dd HH:mm:ss'} )" value="" class=" weui-cell__hd" />
                        <div class="end weui-cell__hd" style="font-size:12px;">结束:</div>
                        <input id="endtime" type="text" name="endtime"  onclick="WdatePicker( {el:this,dateFmt:'yyyy-MM-dd HH:mm:ss'} )" value="" class=" weui-cell__hd">
                        <a href="javascript:void(0)" id="submit" class="">查询</a>
                    </div>
                    <div class="btns">
                        <button id="run" class="weui-btn weui-btn_plain-primary weui-btn_mini">开始</button>
                        <button id="pause" class="weui-btn weui-btn_plain-primary weui-btn_mini">暂停</button>
                        <button id="stop" class="weui-btn weui-btn_plain-primary weui-btn_mini">停止</button>
                    </div>
                    <div id="mapGuiji" style="width:100%; height:100%;"></div>
                </div>
                <div class="content-item">
                    <div id="shuju" style="width:600px; height:500px; display:inline-block;">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="car-el" class="add-car" style="display:none;">
        <div class='weui-cells weui-cells__radius' style="margin: 0 10px;">
            <div class='weui-cell'>
                <div class='weui-cell__hd'>
                    <label class='weui-label'>vin</label>
                </div>
                <div class='weui-cell__bd'>
                    <input class='vehicle-create weui-input' info=1 name='vin' placeholder="请输入vin号" />
                </div>
            </div>
            <div class='weui-cell'>
                <div class='weui-cell__hd'>
                    <label class='weui-label'>角色</label>
                </div>
                <label href="javascript: void(0)">
                        <div class='weui-cell__bd'>
                            <input type="radio" class="weui-check vehicle-create" name="role" value="1">
                            <i class="weui-icon weui-icon-checked"></i>使用者
                        </div>
                    </label>
                <label>
                        <div class='weui-cell__bd'>
                            <input type="radio" class="weui-check vehicle-create" name="role" value="2">
                            <i class="weui-icon weui-icon-checked"></i>拥有者
                        </div>
                    </label>
            </div>
            <div class='weui-cell'>
                <div class='weui-cell__hd'>
                    <label class='weui-label'>姓名</label>
                </div>
                <div class='weui-cell__bd'>
                    <input class='vehicle-create weui-input' info=1 name='uname' placeholder="请输入姓名" />
                </div>
            </div>
            <div class='weui-cell '>
                <div class='weui-cell__hd'>
                    <label class='weui-label'>车辆所属</label>
                </div>
                <div class='weui-cell__bd'>
                    <select class='vehicle-create weui-select' in1fo=1 name='vehicle_license_province'>
                            <option value=''>省</option>
                            <option>京</option>
                            <option>津</option>
                            <option>沪</option>
                            <option>渝</option>
                            <option>冀</option>
                            <option>晋</option>
                            <option>辽</option>
                            <option>吉</option>
                            <option>黑</option>
                            <option>苏</option>
                            <option>浙</option>
                            <option>皖</option>
                            <option>闽</option>
                            <option>赣</option>
                            <option>鲁</option>
                            <option>豫</option>
                            <option>鄂</option>
                            <option>湘</option>
                            <option>粤</option>
                            <option>琼</option>
                            <option>川</option>
                            <option>贵</option>
                            <option>云</option>
                            <option>陕</option>
                            <option>甘</option>
                            <option>青</option>
                            <option>藏</option>
                            <option>桂</option>
                            <option>蒙</option>
                            <option>宁</option>
                            <option>新</option>
                        </select>
                </div>

                <div class='weui-cell'>
                    <div class='weui-cell__hd'>
                        <label class='weui-label'>车牌号码</label>
                    </div>
                    <div class='weui-cell__bd'>
                        <input class='vehicle-create weui-input' in1fo=1 name='vehicle_license_number' placeholder="请输入车牌号码" />
                    </div>
                </div>
            </div>

            <div class='weui-cell weui-cell_select'>
                <div class='weui-cell__hd'>
                    <label class='weui-label'>车辆品牌</label>
                </div>
                <div class='weui-cell__bd'>
                    <select class='vehicle-create weui-select' info=1 name='vehicle_brand'>
                            <option value=''>请输入车辆品牌</option>
                            <option>上汽红岩</option>
                            <option>一汽解放</option>
                            <option>中国重汽</option>
                            <option>福田欧曼</option>
                            <option>东风商用车</option>
                            <option>陕汽重卡</option>
                            <option>华菱重卡</option>
                            <option>北奔重卡</option>
                            <option>联合卡车</option>
                        </select>
                </div>
            </div>
            <div class="weui-cell">
                <a href="javascript:void(0)" class=" weui-btn weui-btn_mini weui-btn_primary" id="add">添加</a>
            </div>
        </div>
    </div>
</div>

<script>
    function createEcharts(el, datas) {
        var myChart = echarts.init(document.getElementById(el));
        option = {
            title: {
                text: '车辆油耗统计'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['天/百公里油耗', '当天油耗', '当天里程']
            },
            toolbox: {
                show: true,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true }
                }
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    data: datas.date
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '天/百公里油耗',
                    type: 'bar',
                    data: datas.lp100km
                },
                {
                    name: '当天油耗',
                    type: 'bar',
                    data: datas.fuelConsumption
                },
                {
                    name: '当天里程',
                    type: 'bar',
                    data: datas.mileage
                }
            ]
        };
        myChart.setOption(option);
    };

    (function () {
        if (ISMOBILE()) {
            window.location.href = '/home/car_info';
        }
        function openNew(m, e) {
            //获取页面的高度和宽度
            var sWidth = document.body.scrollWidth;
            var sHeight = document.body.scrollHeight;

            //获取页面的可视区域高度和宽度
            var wHeight = document.documentElement.clientHeight;

            var oMask = document.getElementById(m);
            oMask.style.height = sHeight + "px";
            oMask.style.width = sWidth + "px";
            var oLogin = document.getElementById(e);
            //获取登陆框的宽和高
            $(oMask).show();
            $(oLogin).show();
            var dHeight = oLogin.offsetHeight;
            var dWidth = oLogin.offsetWidth;
            //设置登陆框的left和top
            oLogin.style.left = sWidth / 2 - dWidth / 2 + "px";
            oLogin.style.top = wHeight / 2 - dHeight / 2 + "px";
            //点击关闭按钮
            var oClose = document.getElementById("close");
            //点击登陆框以外的区域也可以关闭登陆框
            oClose.onclick = oMask.onclick = function () {
                $(oMask).hide();
                $('#mapGuiji').html('');
                $(oLogin).hide();
            };
        }
        // 地图
        function map(lng, lat) {
            var map = new BMap.Map("allmap");
            var point = new BMap.Point(lng, lat);
            map.centerAndZoom(point, 16);
            map.enableScrollWheelZoom();

            var myIcon = new BMap.Icon("/_hongyanche/material/biaozhu.png", new BMap.Size(30, 30), {
                anchor: new BMap.Size(10, 10)
            });

            var marker = new BMap.Marker(point, { icon: myIcon });
            map.addOverlay(marker);
        }
        // 创建模态框内容
        function createEle() {

        }
        // 设置模态框内容
        function setModalData(datas) {
            $('#carDatail').find('div.data').each(function (index, el) {
                $(el).text(datas[$(el).attr('name')]);
            });
        }
        // 添加车辆
        $('body').on('click', '#addCar', function () {
            openNew('mask', 'car-el');
        });
        // 查看详细信息
        $('body').on('click', '.cont-item', function () {
            openNew('mask', 'login');
            window.Tab.init($('.mo-tab'));
            
            $.ajax({
                url: '/maintain/getcarinfo',
                type: 'POST',
                xhrFields:{
                    withCredentials:true
                },
                data: {
                    vhcle: $(this).attr('data-id')
                },
                success: function (data) {
                    if (data.state) {
                        var datas = data.data.info;
                        setModalData(datas);
                        var a = 'http://api.map.baidu.com/geocoder/v2/?address=' + datas.address + '&output=json&ak=zInrkldrOGmWFcCTSifNBRYfKCDtz199';
                        $.ajax({
                            url: a,
                            xhrFields:{
                                withCredentials:true
                            },
                            dataType: 'jsonp',
                            type: 'GET',
                            jsonp: 'callback',
                            success: function (data) {
                                if (data.status) {
                                    return
                                }
                                var lng = data.result.location.lng,
                                    lat = data.result.location.lat;
                                map(lng, lat);
                            }
                        });

                    } else {
                        TOAST.wran(data.errormsg, ' ', 1);
                    }
                },
                error: function (err) {
                    console.log(err);
                    return TOAST.wran('网络错误', ' ', 1);
                }
            });

            // 数据报表
            $.ajax({
                url: '/maintain/getconsumption',
                type: 'POST',
                data: {
//                    vhcle: $('#vhcle').text()
                    vhcle: '0070231880'
                },
                success: function (data) {
                    if (data.state) {
                        var datas = data.data.list;
                        createEcharts('shuju', datas);
                    } else {
                        TOAST.wran(data.errormsg, ' ', 1);
                    }
                },
                error: function (err) {
                    TOAST.wran('网络错误', ' ', 1);
                }
            });
        });
        // 添加车辆按钮
        POST.init('#add', {
            text: "添加",
            url: '/maintain/vehicle_create',
            input: function () {
                var r = {};
                $('.vehicle-create').each(function (index, el) {
                    if ($(el).attr('type') == 'radio') {
                        if (el.checked) {
                            r[$(el).attr('name')] = $(el).val();
                        }
                    } else {
                        r[$(el).attr('name')] = $(el).val();
                    }
                });
                return r;
            },
            success: function () {
                TOAST.success('添加成功', ' ', 1);
                $('#car-el').hide();
                $('#mask').hide();
                $('.vehicle-create').each(function (index, el) {
                    $(el).val(' ');
                });
            }
        });
        // init car list
        function getCarList() {
            $.ajax({
                url: '/maintain/vehicle_list',
                type: 'GET',
                success: function (data) {
                    if (data.state) {
                        var datas = data.data.list;
                        datas.forEach(function (item) {
                            var role = '';
                            if (item.role === 1) {
                                role = "使用者"
                            } else if (item.role === 2) {
                                role = "拥有者"
                            };
                            var vin = item.vin.slice(-8);
                            $('#car-list').append(`
                            <div class="weui-cell cont-item" data-id="${vin}">
                                <div class=" weui-cell__bd"><small>${item.vin}</small></div>
                                <div class=" weui-cell__bd"><small>${item.uname}</small></div>
                                <div class=" weui-cell__bd"><small>${role}</small></div>
                                <div class=" weui-cell__bd"><small>${item.vehicle_brand}</small></div>
                                <div class=" weui-cell__bd"><small>${item.vehicle_license_province + item.vehicle_license_number}</small></div>
                            </div>
                            `)
                        })
                    } else {
                        TOAST.wran(data.errormsg, ' ', 1);
                    }
                },
                error: function (err) {
                    TOAST.wran('网络错误', ' ', 1);
                }
            })
        }
        getCarList();
    })();

</script>

<script>
    function track(obj) {
        var map = new BMap.Map('mapGuiji');
        map.enableScrollWheelZoom();
        map.centerAndZoom(new BMap.Point(obj.start[1], obj.start[2]), 16);
        var startAddr = obj.start.province;
        var _start = new BMap.Point(obj.start[1],obj.start[2]);
        var _end = new BMap.Point(obj.end[1], obj.end[2])
        // 实例化一个驾车导航用来生成路线
        var drv = new BMap.DrivingRoute('北京', {
            onSearchComplete: function(res) {
                if (drv.getStatus() == BMAP_STATUS_SUCCESS) {
                    var arrPois = res.getPlan(0).getRoute(0).getPath();
                    map.addOverlay(new BMap.Polyline(arrPois, {strokeColor: '#111'}));
                    map.setViewport(arrPois);

                    lushu = new BMapLib.LuShu(map,arrPois,{
                        defaultContent:"",//"从天安门到百度大厦"
                        autoView:true,//是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
                        icon  : new BMap.Icon('http://lbsyun.baidu.com/jsdemo/img/car.png', new BMap.Size(52,26),{anchor : new BMap.Size(27, 13)}),
                        speed: 4500,
                        enableRotation:true,//是否设置marker随着道路的走向进行旋转
                        landmarkPois: []});
                }
            }
        });

        drv.search(_start,_end)
        //绑定事件
        $("run").onclick = function(){
            lushu.start();
        }
        $("stop").onclick = function(){
            lushu.stop();
        }
        $("pause").onclick = function(){
            lushu.pause();
        }
        $("hide").onclick = function(){
            lushu.hideInfoWindow();
        }
        $("show").onclick = function(){
            lushu.showInfoWindow();
        }
        function $(element){
            return document.getElementById(element);
        }
    }
    $('body').on('click','#submit',function () {
        var startTime = new Date($('#starttime').val()).getTime()/1000;
        var endTime = new Date($('#endtime').val()).getTime()/1000;
//        var vhcle = $('#vhcle').text()
         var vhcle = '0070231880'
        $.ajax({
            url: '/maintain/gettrace',
            type: 'POST',
            data: {
                vhcle:vhcle,
                start:startTime,
                end:endTime
            },
            success: function (data) {
                if (data.state) {
                    var datas = data.data.list;
                    track({start:datas[0],end:datas[1]});
                } else {
                    TOAST.wran(data.errormsg, ' ', 1);
                }
            },
            error: function (err) {
                TOAST.wran('网络错误', ' ', 1);
            }
        });
    });
    // 搜索车辆
    $('body').on('click', '#search-btn', function(event) {
        var keyWords = $('#keyword').val();
        $.ajax({
            url: '/maintain/vehicle_list',
            type: 'POST',
            data: {
                keywords: keyWords
            },
            success: function(data) {
                if (data.state) {
                    var datas = data.data.list;
                    $('#car-list').html('');
                    datas.forEach(function (item) {
                            var role = '';
                            if (item.role === 1) {
                                role = "使用者"
                            } else if (item.role === 2) {
                                role = "拥有者"
                            };
                            var vin = item.vin.slice(-8);
                            $('#car-list').append(`
                            <div class="weui-cell cont-item" data-id="${vin}">
                                <div class=" weui-cell__bd"><small>${item.vin}</small></div>
                                <div class=" weui-cell__bd"><small>${item.uname}</small></div>
                                <div class=" weui-cell__bd"><small>${role}</small></div>
                                <div class=" weui-cell__bd"><small>${item.vehicle_brand}</small></div>
                                <div class=" weui-cell__bd"><small>${item.vehicle_license_province + item.vehicle_license_number}</small></div>
                            </div>
                            `)
                        })
                } else {
                    TOAST.wran(data.errormsg, ' ', 1);
                }
            },
            error: function() {
                TOAST.wran('网络错误', ' ', 1);
            }
        })
    })
</script>